<template>
    <div>
      <div>
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="任务号">
          <el-input v-model="formSearch.taskid" placeholder="请输入任务号"></el-input>
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select v-model="formSearch.state" placeholder="请输入任务状态">
            <el-option label="全部" :value="null"></el-option>
            <el-option v-for="(item,index) in TaskState" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务类型">
          <el-select v-model="formSearch.task_type" placeholder="请选择任务类型">
            <el-option label="全部" :value="null"></el-option>
            <el-option v-for="(item,index) in TaskType" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick">查询</el-button>
          <el-button type="danger" @click="clearClick">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

      <div>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="expand-wrap">
              <el-descriptions class="margin-top" title="任务详情" :column="3"  border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    任务
                  </template>
                  {{ props.row.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    任务备注
                  </template>
                  {{ props.row.task_remark }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    任务佣金
                  </template>
                  {{ props.row.money }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    任务地址
                  </template>
                  {{ JSON.parse(props.row.task_address).name }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    任务时间
                  </template>
                  {{ props.row.task_time }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    联系人
                  </template>
                  {{ props.row.task_contact }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    任务图片
                  </template>
                  <el-image style="width: 100px" :src="baseURL+props.row.task_pic"></el-image>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    任务发布时间
                  </template>
                  {{ props.row.start_time }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    任务截至时间
                  </template>
                  {{ props.row.end_time }}
                </el-descriptions-item>
              </el-descriptions>

                <el-descriptions class="margin-top" title="订单详情" :column="3"  border>
                  <template slot="extra">
                    <el-button type="primary" size="small" @click="upOrderClick(props.row)">操作</el-button>
                  </template>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      任务号
                    </template>
                    {{ props.row.taskid }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      订单号
                    </template>
                    {{ props.row.orderid }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      任务状态
                    </template>
                    <el-tag size="small" :type="taskState(props.row.state).style">{{ taskState(props.row.state).label }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      发布者
                    </template>
                    {{ props.row.uid }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      接单者
                    </template>
                    {{ props.row.serverid }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      评价星星
                    </template>
                    {{ props.row.comment_star }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-office-building"></i>
                      评价内容
                    </template>
                    {{ props.row.comment_txt }}
                  </el-descriptions-item>
                </el-descriptions>

              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="id"
              label="ID"
              sortable
              width="80px">
          </el-table-column>
          <el-table-column
              prop="title"
              label="帮助内容">
          </el-table-column>
          <el-table-column
              prop="money"
              label="佣金"
              sortable
              width="80px"
          >
          </el-table-column>
          <el-table-column
              label="类型"
              sortable
              width="80px"
          >
            <template slot-scope="scope">
              <el-tag>{{taskType(scope.row.task_type).label}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              label="状态"
              sortable
              width="80px"
          >
            <template slot-scope="scope">
              <el-tag :type="taskState(scope.row.state).style">{{taskState(scope.row.state).label}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="start_time"
              sortable
              label="任务开始时间"
          >
          </el-table-column>
          <el-table-column
              prop="end_time"
              sortable
              label="任务截至时间"
          >
          </el-table-column>
          <el-table-column
              prop="username"
              label="发布者"
          >
            <template slot-scope="scope">
              <div style="display: flex;align-items: center">
                <el-avatar :src="baseURL+scope.row.user_pic"></el-avatar>
                <span>{{scope.row.username}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" plain @click="updateClick(scope.row)">编辑</el-button>
              <el-button type="danger" plain @click="deleteClick(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            layout="prev, pager, next"
            :page-size="10"
            :current-page="pagenum"
            @current-change="pageChange"
            :total="total">
        </el-pagination>
      </div>

      <!--        修改框-->
      <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
        <el-form :model="updateForm" label-position="right" label-width="100px">
          <el-form-item label="标题" >
            <el-input v-model="updateForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" >
            <el-input v-model="updateForm.task_remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="任务时间" >
            <el-input v-model="updateForm.task_time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="任务联系人" >
            <el-input v-model="updateForm.task_contact" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="任务地址" >
            <el-input v-model="task_address.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="任务图片">
            <el-button style="margin-bottom: 5px" type="primary" @click="openMapClick">选择一张广告图</el-button>
            <el-input v-model="updateForm.task_pic" disabled></el-input>
          </el-form-item>
          <el-form-item label="任务类型" >
            <el-select v-model="updateForm.task_type" placeholder="请选择任务类型">
              <el-option v-for="(item,index) in TaskType" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务截至时间">
            <el-date-picker
                v-model="updateForm.end_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserEvent">确 定</el-button>
        </div>
      </el-dialog>
      <MapSelect ref="mapPop" @mapselectEvent="mapselectEvent"></MapSelect>


      <!--        修改框-->
      <el-dialog title="编辑用户" :visible.sync="uporderFormVisible">
        <el-form :model="uporderForm" label-position="right" label-width="100px">
          <el-form-item label="任务号" >
            <el-input disabled v-model="uporderForm.taskid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单号" >
            <el-input disabled v-model="uporderForm.orderid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="任务状态" >
            <el-select v-model="uporderForm.state" placeholder="请选择任务类型">
              <el-option v-for="(item,index) in TaskState" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接单者" v-if="uporderForm.state>0">
            <el-input v-model="uporderForm.serverid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="评价星星" v-if="uporderForm.state>1">
            <el-input type="number" v-model="uporderForm.comment_star" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="评价" v-if="uporderForm.state>1">
            <el-input  v-model="uporderForm.comment_txt" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="uporderFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="uporderUserEvent">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import MapSelect from "@/components/MapSelect";
import {editOrder, editTask, getTaskAll} from "@/request";
import menu from '@/assets/menu.json'
export default {
  name: "taskList",
  data(){
    return {
      task_address:{
        name:""
      },
      tableData:[],
      TaskType:menu.TaskType,
      TaskState:menu.TaskState,
      dialogFormVisible:false,
      uporderFormVisible:false,
      formSearch:{
        taskid:null,
        state:null,
        task_type:null,
      },
      updateForm:{},
      uporderForm:{},
      pagenum:1,
      total:0
    }
  },
  created() {
    this.getTaskList()
  },
  components:{
    MapSelect
  },
  computed:{
    taskType(){
      return function (item){
        return this.TaskType.find(o=>o.value==item);
      }
    },
    taskState(){
      return function (item){
        return this.TaskState.find(o=>o.value==item);
      }
    }
  },
  methods:{
    pageChange(val){
      this.pagenum=val
      this.getTaskList();
    },
    mapselectEvent(value){
      if(this.dialogFormVisible)this.updateForm['task_pic']=value.length&&value[0].filepath
    },
    openMapClick(){
      this.$refs.mapPop.showMapSelect()
    },
    async updateUserEvent(){
      this.updateForm['task_address']=JSON.stringify(this.task_address);
      let data=await editTask(this.updateForm);
      if(data.code!=200)return this.$message.error(data.message);
      this.$message.success(data.message);
      this.getTaskList();
      this.dialogFormVisible=false;
    },
    updateClick(item){
      this.dialogFormVisible=true;
      this.task_address=JSON.parse(item.task_address||"{name:''}")
      this.updateForm={
        id:item.id,
        title:item.title,
        task_remark:item.task_remark,
        task_time:item.task_time,
        task_contact:item.task_contact,
        task_address:JSON.parse(item.task_address||"{name:''}"),
        task_pic:item.task_pic,
        task_type:item.task_type,
        end_time:new Date(item.end_time).FormatDate()
      };
    },
    deleteClick(id){
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await editTask({id,is_delete:1});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.getTaskList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    clearClick(){
      this.formSearch={
        taskid:null,
        state:null,
        task_type:null,
      }
      this.init();
      this.getTaskList();
    },
    searchClick(){
      this.init();
      this.getTaskList();
    },
    init(){
      this. pagenum=0
      this.total=0
    },
    async getTaskList(){
      this.formSearch['is_delete']=0
      let data=await getTaskAll(this.formSearch);
      if(data.code!=200)return this.$message.error(data.message);
      this.tableData=data.data.list;
    },
    upOrderClick(item){
      this.uporderFormVisible=true;
      this.uporderForm={
        taskid:item.taskid,
        orderid:item.orderid,
        serverid:item.serverid,
        state:item.state,
        comment_star:item.comment_star,
        comment_txt:item.comment_txt,
      };
    },
    async uporderUserEvent(){
      let data=await editOrder(this.uporderForm);
      if(data.code!=200)return this.$message.error(data.message);
      this.$message.success(data.message);
      this.getTaskList();
      this.uporderFormVisible=false;
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.expand-wrap{
  width: 90%;
  margin: 0 auto;
}
.el-descriptions {
  margin-bottom: 30px;
}
</style>